<template>
  <div id='download'>

    <div class="topView">
      <div class="searchInput" >
        <input v-model="virusSpecies"
               @keyup.enter="search"
               type="text"
               placeholder="e.g Suid alphaherpesvirus 1"/>
        <div class="btn-default" @click="search">
          Search
        </div>
      </div>
    </div>

    <el-table class="table" v-loading="loading" :data="list" border fit
              style="width: 100%"
              selectRow>
      <el-table-column
          sortable
          align="center"
          label="Viral group"
          prop="viral_group">
        <template slot-scope="scope">
          <span>{{ scope.row.viral_group }}</span>
        </template>
      </el-table-column>
      <el-table-column
          sortable
          align="center"
          label="Viral family"
          prop="viral_family">
        <template slot-scope="scope">
          <span>{{ scope.row.viral_family }}</span>
        </template>
      </el-table-column>
      <el-table-column
          sortable
          align="center"
          label="Viral species"
          prop="virus_species">
        <template slot-scope="scope">
          <span>{{ scope.row.virus_species }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--          align="center"-->
<!--          label="mRNA">-->
<!--        <template slot-scope="scope">-->
<!--          <span v-if="!scope.row.mRNA">-</span>-->
<!--          <span v-else class="b" @click="downloadClick(scope.row, 'mRNA')">Download</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
          align="center"
          label="lncRNA">
        <template slot-scope="scope">
          <span v-if="!scope.row.lncRNA">-</span>
          <span v-else class="b" @click="downloadClick(scope.row, 'lncRNA')">Download</span>
        </template>
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          align="center"-->
<!--          width="130"-->
<!--          label="circRNA information">-->
<!--        <template slot-scope="scope">-->
<!--          <span v-if="!scope.row.circRNA">-</span>-->
<!--          <span v-else class="b" @click="downloadClick(scope.row, 'circRNA information')">Download</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          align="center"-->
<!--          width="130"-->
<!--          label="circRNA sequence">-->
<!--        <template slot-scope="scope">-->
<!--          <span v-if="!scope.row.circRNA">-</span>-->
<!--          <span v-else class="b" @click="downloadClick(scope.row, 'circRNA sequence')">Download</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          align="center"-->
<!--          label="sRNA">-->
<!--        <template slot-scope="scope">-->
<!--          <span v-if="!scope.row.sRNA">-</span>-->
<!--          <span v-else class="b" @click="downloadClick(scope.row, 'sRNA')">Download</span>-->
<!--        </template>-->
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

  import {exportEntries, getDownloadDatasets} from "../api/download";

  export default {
    name: "Download",
    components: {},
    data() {
      return {
        list: [],
        loading: false,
        virusSpecies: null
      }
    },
    mounted() {
      this.loadData()
    },
    methods: {
      search() {
        this.loadData()
      },
      async loadData() {
        this.loading = true
        const res = await getDownloadDatasets({virusSpecies: this.virusSpecies})
        if (res) {
          this.dealData(res.data)
        }

        this.loading = false
      },
      dealData(data) {

        let arr = []
        let obj = {}
        data.map(n => {
          let key = n.viral_group + n.viral_family + n.virus_species
          if (obj.hasOwnProperty(key)) {
            obj[key][n.rna_type] = true
          }else {
            obj[key] = {
              viral_group: n.viral_group,
              viral_family: n.viral_family,
              virus_species: n.virus_species,
            }
            obj[key][n.rna_type] = true
          }
        })

        Object.keys(obj).forEach(n => {
          arr.push(obj[n])
        })
        this.list = arr
      },
      async downloadClick(item, rnaType) {
        let params = {
          viralGroup: item.viral_group,
          viralFamily: item.viral_family,
          virusSpecies: item.virus_species,
          rnaType: rnaType
        }
        const data = await exportEntries(params)
        this.downloadFile(data, rnaType)
      },
      downloadFile(data, rnaType) {
        if (!data) {
          return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url

        let fileName = rnaType + '_allInfo.xlsx'
        if (rnaType === 'circRNA information') {
          fileName = 'circRNA_information.xlsx'
        }
        else if (rnaType === 'circRNA sequence') {
          fileName = 'circRNA_sequence.fa'
        }
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
      },
    }
  }
</script>

<style lang='stylus' scoped>
  #download {
    width 1170px
    margin 0 auto
    margin-top 20px
    padding-top 15px

    .topView {
      display flex
      justify-content flex-end
      margin-bottom 30px
    }

    .searchInput {
      width 450px
      height 42px
      display flex

      input {
        flex 1
        height 100%
        line-height 42px
        border 2px solid #11427DFF
        outline 0
        border-radius 7px
        padding 0 20px
      }

      .btn-default {
        margin-left 25px
        width 100px
        line-height 40px
        text-align center
        border-radius 7px
        font-size 16px
        background #11427DFF
        color #fff
        outline 0
        cursor pointer
      }
    }


    .el-table /deep/ {
      .b {
        cursor pointer
        color #0a2458
      }

      .b:hover {
        text-decoration underline
        color #0064bc
      }

      .cell {
        font-weight 800
        overflow: hidden; //超出隐藏
        text-overflow: ellipsis; //超出文本设置为...
        display: -webkit-box; //将div1转换为盒子模型
        -webkit-line-clamp: 2; //设置div1的文本为2行
        -webkit-box-orient: vertical; //从顶部向底部垂直布置子元素
      }

      .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #0064bc;
        border-color: #0064bc;
      }

      .el-checkbox__label {
        color #11427D;
      }

      th {
        background-color: #11427D;
        color: #fff
        font-size 14px

        div {
          word-break: break-word;
        }
      }

      //设置图标颜色
      .el-loading-spinner .path {
        stroke: #11427D;
      }
    }
  }

</style>
